<template>
   <el-menu  :collapse="collapsed" :default-active="$route.path" collapse-transition router unique-opened class="el-menu-vertical-demo" background-color="#334157" text-color="#fff" active-text-color="#ff0">
    <div class="logobox">
      <img class="logoimg" src="../../assets/images/stu.png" alt="">
    </div>
    <template v-for="list in lists">
          <el-submenu v-if="list.children && list.children.length" :index="list.name" :key="list.path">
             <template slot="title"><i :class="list.icon"></i><span>{{list.name}}</span></template>
          </el-submenu>
             <el-menu-item v-else :index="'/'+list.path" :key="list.path"><i class="iconfont" v-if="list.id == 1">&#xe666;</i><i class="iconfont" v-else >&#xe601;</i><span slot="title">{{list.name}}</span></el-menu-item>
    </template>
  </el-menu>
</template>

<script>

export default {
  name: 'leftnav',
  data () {
    return {
      tabPosition: 'left',
      collapsed: false,
      lists: []
    }
  },
  created () {
    const res = {
      data: [{
        id: '1',
        name: '考生报名',
        path: 'studentPage/stuSignup',
        children: []
      },
      {
        id: '2',
        name: '查看准考证',
        path: 'studentPage/lookExamCard',
        children: []
      }
      ]
    }
    this.lists = res.data
    this.$root.Bus.$on('toggle', value => {
      this.collapsed = value
    })
  },
  methods: {
  },
  computed: {
    defaultActive () {
      return '/' + this.$route.path.split('/').reverse()[0]
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/style/varibles.styl'
span
 font-size : 18px
.el-menu-vertical-demo:not(.el-menu--collapse)
  width: 240px
  min-height: 400px
.el-menu-vertical-demo:not(.el-menu--collapse)
  border: none
  text-align: left
.el-menu-item-group__title
  padding: 0px
.el-menu-bg
  background-color: #1f2d3d !important
.el-menu
  border: none
/deep/.el-menu-item
 font-size : 18px
.logobox
  height: 100px
  line-height: 40px
  color: #9d9d9d
  font-size: 20px
  text-align: center
  padding: 15px 0px
.logoimg
  border-radius : 50%
  height: 50px
.iconfont
 font-size : 22px
 padding-right : 10px
.left_tab
 height : 200px
 margin-left : 130px
</style>
